<template>
  <swiper
    class="swiper"
    :indicator-dots="indicatorDots"
    :autoplay="autoplay"
    :interval="interval"
    :duration="duration"
  >
    <block
      v-for="(item, index) in images"
      :key="index"
    >
      <swiper-item>
        <image
          :src="item.url"
          class="slide-image"
          mode="aspectFill"
          @click="preImg(item.url)"
        />
      </swiper-item>
    </block>
  </swiper>
</template>

<script>
export default {
  props: {
    images: {
      type: Array
    }
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 500
    };
  },
  methods: {
    preImg(url) {
      console.log(url);
      let urls = this.images.map((item) => {
        return item.url
      })
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls // 需要预览的图片http链接列表
      })
    },
  }
};
</script>

<style scoped>
.swiper {
  width: 345px;
  height: 300px;
}
image {
  height: 100%;
  width: 100%;
}
</style>